<script type="text/javascript">
    $(function () {
        var editRowId;
        $('#stree2').treegrid({
            url: '/structure/resourceTree',
            idField: 'id',//设置主键
            treeField: 'name',//设置显示树的字段
            fitColumns: true,//自适应宽度
            checkOnSelect: false,//如果为true，当用户点击行的时候该复选框就会被选中或取消选中。如果为false，当用户仅在点击该复选框的时候才会呗选中或取消。
            selectOnCheck: false,//如果为true，单击复选框将永远选择行。如果为false，选择行将不选中复选框。
            rownumbers: false,//显示行号
            onlyLeafCheck: true,//定义是否仅在叶子节点前显示复选框
            animate: true,//展开关闭时是否有动画效果
            fit: true,//自适应父容器
            autoRowHeight: false,
            cascadeCheck: false,
            nowrap: false,
            columns: [[
                {field: 'ck', checkbox: true},
                {field: 'name', title: '资源', width: 100},
                {
                    field: 'resource', title: '权限', width: 200,
                    formatter: function (value, row, index) {
                        value = `<label><input type="checkbox" /><i class="iconfont icon-touming"></i>读书</label>
                                 <label><input type="checkbox" /><i class="iconfont icon-touming"></i>阅读</label>`;
                        return value;
                    }
                }
            ]]
        });
        $('#roleListData').datagrid({
            url: '/structure/listUserByStructure', //数据接收URL地址
            pagination: true,
            pagePosition: 'bottom',
            pageSize: 10,
            pageList: [10, 20, 50],
            fit: true,
            fitColumns: false,//在表格列多的时候设置为false
            nowrap: false,	//表格内容较多时自动换行
            border: false,
            idField: 'id',
            toolbar:'#nrTool',
            columns: [[
                {field: "ck", checkbox: "true"},
                {field: 'username', title: '姓名', editor: 'text', width: '20%', sortable: true},
                {field: 'sex', title: '日期', width: '20%', sortable: true},
                {field: 'sign', title: '时间', width: '20%', sortable: true},
                {field: 'experience', title: '有效否', width: '16%', sortable: true},
                {field: 'score', title: '备注', width: '20%'}
            ]]
        });$('#userListData').datagrid({
            url: '/structure/listUserByStructure', //数据接收URL地址
            pagination: true,
            pagePosition: 'bottom',
            pageSize: 10,
            pageList: [10, 20, 50],
            fit: true,
            fitColumns: false,//在表格列多的时候设置为false
            nowrap: false,	//表格内容较多时自动换行
            border: false,
            idField: 'id',
            toolbar:'#cuTool',
            columns: [[
                {field: "ck", checkbox: "true"},
                {field: 'username', title: '姓名', editor: 'text', width: '20%', sortable: true},
                {field: 'sex', title: '日期', width: '20%', sortable: true},
                {field: 'sign', title: '时间', width: '20%', sortable: true},
                {field: 'experience', title: '有效否', width: '16%', sortable: true},
                {field: 'score', title: '备注', width: '20%'}
            ]]
        });
    })
</script>

<div class="easyui-layout" data-options="fit:true,border:false">
    <div data-options="region:'west',split:true,border:false,width:'50%'">
        <div class="easyui-layout" data-options="fit:true,border:false">
            <div data-options="region:'north',split:true,border:false,height:'50%'">

                <div class="xy-toolbar" id="nrTool">
                    <div class="xy-toolbar-left">角色列表</div>
                    <div class="xy-toolbar-right">
                        <input id="select1" class="easyui-combobox" name="dept"
                               data-options="valueField:'id',textField:'text',url:'get_data.php'"/>
                        <button class="iconfont icon-soushuo xy-button"><span>&nbsp;&nbsp;搜索</span></button>
                    </div>
                </div>
                <table id="roleListData"></table>
            </div>
            <div data-options="region:'center',border:false">
                <div class="xy-toolbar" id="cuTool">
                    <div class="xy-toolbar-left">用户列表</div>
                    <div class="xy-toolbar-right">
                        <input id="select" class="easyui-combobox" name="dept"
                               data-options="valueField:'id',textField:'text',url:'get_data.php'"/>
                        <button class="iconfont icon-soushuo xy-button"><span>&nbsp;&nbsp;搜索</span></button>
                    </div>
                </div>
                <table id="userListData"></table>
            </div>
        </div>
    </div>
    <div data-options="region:'center',border:false">
        <div class="xy-toolbar" >
            <div class="xy-toolbar-left">
                <button class="iconfont icon-xinzeng xy-button"><span>&nbsp;&nbsp;全部选择</span></button>
                <button class="iconfont icon-shanchu xy-button"><span>&nbsp;&nbsp;全部不选</span></button>
            </div>
            <div class="xy-toolbar-right">
                <input id="cc" class="easyui-combobox" name="dept"
                       data-options="valueField:'id',textField:'text'" />
                <button class="iconfont icon-soushuo xy-button"><span>&nbsp;&nbsp;搜索</span></button>
            </div>
        </div>
        <table id="stree2"></table>
    </div>
</div>